<template>
  <div class="diy_edit address_edits" id="address_edit">
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
      class="edit_address_form"
      size="large"
    >
      <el-row class="row_e">
        <el-col :xs="24" :sm="12" :lg="6" class="el_form_item_warp">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name"> </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="6" class="el_form_item_warp">
          <el-form-item label="手机号码" prop="phone">
            <el-input type="phone" v-model="form.phone"> </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="6" class="el_form_item_warp">
          <el-form-item label="邮编" prop="postcode">
            <el-input v-model="form.postcode"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="6" class="el_form_item_warp">
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="Onsubmit" size="large"
          >提交</el-button
        >
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { $getUrlParams,} from "@/utils/utils.js";
let router = useRouter();
let store = useStore();
let token = storageHelper.getToken() || null;
let UserInfo = storageHelper.getUserInfo();
let address_id = $getUrlParams().address_id;
let url_add = ref("/api/address/add");
let url_set = ref("/api/address/set");
let url_get_obj = ref("/api/address/get_obj");
let title = ref("address");
let field = ref("address_id");

let form = ref({
  address_id: 0,
  name: "",
  phone: "",
  postcode: "",
  address: "",
});

let ruleFormRef = ref(null);
let rules = ref({
  name: [
    {
      required: true,
      message: "姓名不能为空",
      trigger: "blur",
    },
  ],
});

// 点击取消
let cancel = () => {
  router.go(-1);
};
// 点击提交
let Onsubmit = async () => {
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    if (address_id) {
      // 编辑
      delete form.value.update_time;
      $post(url_set.value + "?address_id=" + address_id, form.value).then(
        (res) => {
          if (res.result) {
            ruleFormRef.value.resetFields();
            router.push("/home/address/table");
            ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        }
      );
    } else {
      // 新增
      $post(url_add.value, form.value).then((res) => {
        if (res.result) {
          ruleFormRef.value.resetFields();
          router.push("/home/address/table");
          ElMessage.success("提交成功！");
        } else if (res.error) {
          ElMessage.error(res.error.message);
        }
      });
    }
  } else {
    ElMessage.error(msg);
  }
};
// 获取详情
let get_address_obj = async () => {
  var list = await $get(url_get_obj.value + "?address_id=" + address_id);
  form.value = list.result.obj;
};
onMounted(() => {
  if(address_id){
	get_address_obj();
  }
});
</script>

<style scoped lang="less">
.diy_edit {
  width: 100%;
  .edit_address_form {
    max-width: 60%;
    margin: 90px auto;
    .fn {
      width: 100%;
    }
  }
  img {
    width: 100px;
    height: 100px;
  }
  .edit_list_address_sell {
    width: 80%;
    margin: 90px auto;
  }
  .footer {
    text-align: center;
  }
}
</style>
